<template>
    <div>
        <Modal v-model="data.isShow" :mask-closable="false" width="360">
			<p slot="header" class="header-view">充值</p>
			<div class="main-view">
                <Form ref="formInline" :model="data.data" :rules="ruleInline" :label-width="100">
                    <FormItem label="会员卡号：">
                        <p style="text-align: left;">{{data.row.cardNo}}</p>
                    </FormItem>
                    <!-- <FormItem label="充值金额：" prop="value">
                        <InputNumber v-model="data.data.value" placeholder="请输入金额">
                        </InputNumber>
                    </FormItem> -->
                    <p>请选择支付方式：</p>
                    <div class="payWay-view">
                        <div class="payway" v-for="item in payWayList" @click="clickPay(item)">
                            <img :src="item.imageUrl" alt="">
                            <p>{{item.label}}</p>
                        </div>
                    </div>
                    <div class="price-view" v-if="showPay">
                        <p>充值金额：
                            <Input 
                                v-model="data.data.money" 
                                placeholder="请输入金额"
                                @on-focus="onFocus" 
                                class="input">
                            </Input>
                        </p>
                    </div>
                    <!-- 计算器弹窗 -->
					<div class="calc-view" v-if="calcShow && showPay">
						<XCalcModal
							@on-click-action="clickAction">
						</XCalcModal>
					</div>
                </Form>
			</div>
            <div slot="footer">
				<Button type="primary" @click="clickSubmit">充值</Button>
				<Button @click="data.isShow = false">取消</Button>
			</div>
		</Modal>
    </div>
</template>

<script>
import $ from 'jquery'
import XCalcModal from '@/components/XCalcModal'
    export default {
        props: ['data', 'rowCard'],
        components: {
            XCalcModal
        },
        data() {
            return {
                showPay: true,
                calcShow: false,
                ruleInline: {
                    value: [
                        { required: true, message: '请输入充值金额', trigger: 'blur' }
                    ]
                },
                payWayList: [
                    {
                        imageUrl: require('@/assets/mo-1.png'),
                        label: '现金',
                        value: 1
                    },
                    {
                        imageUrl: require('@/assets/zpay-0.png'),
                        label: '支付宝',
                        value: 2
                    },
                    {
                        imageUrl: require('@/assets/we-0.png'),
                        label: '微信',
                        value: 3
                    },
                    {
                        imageUrl: require('@/assets/card-0.png'),
                        label: '银联卡',
                        value: 4
                    },
                ]
            }
        },
        mounted() {
            let append = $('.ivu-input-group-prepend, .ivu-input-group-append');
            for(let i = 0; i < append.length; i++) {
                append[i].style.background = 'none'
            }
            let formItem = $('.ivu-form-item');
            for(let i = 0; i < formItem.length; i++) {
                formItem[i].style.marginBottom = '.2rem';
            }
        },
        methods: {
            clickPay(item) {
                switch(item.label){
                    case '现金': 
                        this.showPay = true;
                        this.payWayList = [
                            {
                                imageUrl: require('@/assets/mo-1.png'),
                                label: '现金'
                            },
                            {
                                imageUrl: require('@/assets/zpay-0.png'),
                                label: '支付宝'
                            },
                            {
                                imageUrl: require('@/assets/we-0.png'),
                                label: '微信'
                            },
                            {
                                imageUrl: require('@/assets/card-0.png'),
                                label: '银联卡'
                            },
                        ]
                    break
                    case '支付宝': 
                        this.showPay = false;
                        this.payWayList = [
                            {
                                imageUrl: require('@/assets/mo-0.png'),
                                label: '现金'
                            },
                            {
                                imageUrl: require('@/assets/zpay-1.png'),
                                label: '支付宝'
                            },
                            {
                                imageUrl: require('@/assets/we-0.png'),
                                label: '微信'
                            },
                            {
                                imageUrl: require('@/assets/card-0.png'),
                                label: '银联卡'
                            },
                        ]
                    break
                    case '微信': 
                        this.showPay = false;
                        this.payWayList = [
                            {
                                imageUrl: require('@/assets/mo-0.png'),
                                label: '现金'
                            },
                            {
                                imageUrl: require('@/assets/zpay-0.png'),
                                label: '支付宝'
                            },
                            {
                                imageUrl: require('@/assets/we-1.png'),
                                label: '微信'
                            },
                            {
                                imageUrl: require('@/assets/card-0.png'),
                                label: '银联卡'
                            },
                        ]
                    break
                    case '银联卡': 
                        this.showPay = false;
                        this.payWayList = [
                            {
                                imageUrl: require('@/assets/mo-0.png'),
                                label: '现金'
                            },
                            {
                                imageUrl: require('@/assets/zpay-0.png'),
                                label: '支付宝'
                            },
                            {
                                imageUrl: require('@/assets/we-0.png'),
                                label: '微信'
                            },
                            {
                                imageUrl: require('@/assets/card-1.png'),
                                label: '银联卡'
                            },
                        ]
                    break
                }
            },
            clickSubmit() {
                // this.$refs['formInline'].validate((valid) => {
                    // if (valid) {
                        this.$emit('on-submit', this.data);
                    // } else {
                        // this.$Message.error('表单验证失败!');
                    // }
                // })
            },
            onFocus() {
			    this.calcShow = true;
            },
            clickAction(formData) {
                switch(formData) {
                    case 'sure': 
                        this.calcShow = false;
                    break
                    case 'clear': 
                        this.data.data.money = 0;
                    break
                    case 'del': 
                        if (this.data.data.money != 0) {
                            if (this.data.data.money.toString().length > 1) {
                                this.data.data.money = this.data.data.money.toString().substring(0 ,this.data.data.money.toString().length - 1)
                            } else {
                                this.data.data.money = 0;
                            }
                        }
                    break
                    case '00': 
                        if (this.data.data.money != 0) {
                            this.data.data.money = parseFloat(this.data.data.money + '00')
                        }
                    break
                    case 100: 
                        this.data.data.money = parseFloat(this.data.data.money) + 100;
                    break
                    case 200: 
                        this.data.data.money = parseFloat(this.data.data.money) + 200;
                    break
                    case 500: 
                        this.data.data.money = parseFloat(this.data.data.money) + 500;
                    break
                    case 1000: 
                        this.data.data.money = parseFloat(this.data.data.money) + 1000;
                    break
                    case '.': 
                        if (this.data.data.money.toString().indexOf('.') == -1) {
                            this.data.data.money = (this.data.data.money + formData);
                        }
                    break
                    default: 
                        this.data.data.money = parseFloat(this.data.data.money + formData.toString());
                    break
                }
                
            }
        }
    }
</script>

<style scoped lang="less">
.header-view {
    text-align: center;
}
.main-view {
    position: relative;
    .input {
        width: 1.2rem;
        border: .01rem solid #D5CED2;
        border-radius: 5px;
    }
}
.payWay-view {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: .3rem;
    margin-top: .2rem;
    img {
        width: .6rem;
        height: .6rem;
    }
    p {
        text-align: center;
    }
}
.calc-view {
    position: absolute;
    top: 2.35rem;
    left: 1.5rem;
    z-index: 9999;
    margin: .3rem;
    margin-bottom: .1rem;
}
</style>